<script>
import axios from 'axios';
import http from "@/api/http";

export default {
  name: "MemberForm",
  data() {
    return {
      parentsCloums: [ //外层table的表头
        {
          name: "项目号",
          id: "1",
          propName: "projectId",
        }, {
          name: "项目名称",
          id: "2",
          propName: "projectName",
        }, {
          name: "项目状态",
          id: "3",
          propName: "projectStatus",
        }
      ],
      tableData: [], //外层table的数据
      sonColumns: [ //内层table的表头
        {
          name: "成员ID",
          id: "1",
          propName: "memberId",
        },
        {
          name: "姓名",
          id: "2",
          propName: "memberName",
        },
        {
          name: "职务",
          id: "3",
          propName: "memberJob",
        }
      ]
    }
  },
  methods: {
    async fetchProjectsAndMembers() {
      try {
        // 获取所有项目的数据
        const projectsResponse = await http.get('/api/members/projects');
        /*console.log('Projects response:', projectsResponse);*/

       /* // 检查项目数据是否存在并且是一个数组
        if (!projectsResponse || !projectsResponse.data || !Array.isArray(projectsResponse.data)) {
          console.error('Projects data is invalid:', projectsResponse.data);
          throw new Error('Invalid projects data');
        }*/

        const projects = projectsResponse;
        /*console.log('Projects:', projects);*/

        // 使用 Promise.all 并行获取所有项目的成员信息
        const projectsWithMembers = await Promise.all(projects.map(async (project) => {
          try {
            const membersResponse = await http.get(`/api/members/${project.projectId}/members`);
           /* console.log(`Members response for project ${project.projectId}:`, membersResponse);*/

            // 检查成员数据是否存在
            const members = membersResponse || [];
            return {
              ...project,
              sonData: members
            };
          } catch (error) {
            console.error(`Error fetching members for project ${project.projectId}:`, error);
            return {
              ...project,
              sonData: []
            };
          }
        }));

        this.tableData = projectsWithMembers;
        console.log('Projects with members:', projectsWithMembers);
      } catch (error) {
        console.error('Error fetching projects:', error);
      }
    }
  },
  created() {
    this.fetchProjectsAndMembers();
    /*console.log(this.tableData)*/
  }
}
</script>

<template>
  <div class="shopList">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.sonData" style="width: 60%;margin-left:40px">
            <el-table-column
                v-for="(value, id, index) in sonColumns"
                :label="value.name"
                :prop="value.propName"
                :key="index"
            >
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- 对外层的表格表头进行了遍历循环 -->
      <el-table-column
          v-for="(value, key, index) in parentsCloums"
          :label="value.name"
          :prop="value.propName"
          :key="index"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
